<!--
 * @Description: 摄像头绑定管理页面
-->
<template>
  <!-- <BaseMainSlot :show-tab="true">
    <template v-slot:search-box>
      <SearchBox @search="search">
        <div class="common-search-item">
          <div class="label">设备名称:</div>
          <div class="input">
            <el-input v-model="equipmentName" clearable />
          </div>
        </div>
      </SearchBox>
    </template>
    <template v-slot:table-box>
      <div class="dataitem-main">
        <div class="tr-sid">
          <div class="sid-head">选择鱼塘</div>
          <div class="sid-tree">
            <treeSide @treeselectvalue="treeselectvalue" />
          </div>
        </div>
        <div class="tab-box">
          <div class="tab-content">
            <el-table ref="tableData" v-loading="loading" :data="tableData" stripe border height="calc(100% - 50px)">
              <el-table-column type="selection" width="55" :selectable="(row) => { return !row.selectable }" />
              <el-table-column type="index" label="序号" width="100" />
              <el-table-column prop="equipment.equipmentName" label="设备名称">
                <template slot-scope="scope">
                  {{ scope.row.equipment ? scope.row.equipment.equipmentName : '' }}
                </template>
              </el-table-column>
              <el-table-column prop="equipment.equipmentTypeStr" label="设备类型">
                <template slot-scope="scope">
                  {{ scope.row.equipment ? scope.row.equipment.equipmentTypeStr : '' }}
                </template>
              </el-table-column>
              <el-table-column prop="cameraIdList" label="绑定摄像头">
                <template slot-scope="scope">
                  {{ scope.row.cameraIdList ? scope.row.cameraIdList.map(el => {
    return el.camera.cameraName
  }).join(',')
    :
    '' }}
                </template>
              </el-table-column>
              <el-table-column width="120" label="操作">
                <template v-if="scope.row.fishPondEquipmentMapperId" slot-scope="scope">
                  <el-button v-if="judgePermission(171, 'delete')" class="text-btn-cursor cursor-delete" type="text"
                    size="small" @click="bindCamera(scope.row)">绑定摄像头</el-button>
                </template>
              </el-table-column>
            </el-table>
            <Pagination :page-size="pageSize" :current-page="currentPage" :total-size="totalSize"
              @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
          </div>
        </div>
      </div>
      <el-dialog title="绑定摄像头" :visible.sync="dialogFormVisible" @close="cancel">
        <el-form ref="formData" :model="formData" label-position="left" class="w100p">
          <el-form-item label="摄像头列表" class="w100p checkbox">
            <el-select filterable clearable v-model="formData.cameraIdList" multiple>
              <el-option v-for="item in cameraList" :key="item.cameraId + 'camera'" :label="item.cameraName"
                :value="item.cameraId" />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancelbtn" @click="cancel('formData')">取 消</el-button>
          <el-button class="savebtn" type="primary" @click="save">保 存</el-button>
        </div>
      </el-dialog>
    </template>
  </BaseMainSlot> -->
  <div class="content">
    <div class="typeTree">
      <treeSide @treeselectvalue="treeselectvalue" />
    </div>
  <MainSlot>
    <template v-slot:searchForm>
      <SearchForm v-if="formItemList.length" :formItemList="formItemList" @search="search">
      </SearchForm>
    </template>
    <template v-slot:table>
      <el-table ref="tableData" v-loading="loading" :data="tableData" stripe border height="calc(100% - 50px)">
        <el-table-column type="selection" width="55" :selectable="(row) => { return !row.selectable }" />
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="equipment.equipmentName" label="设备名称">
          <template slot-scope="scope">
            {{ scope.row.equipment ? scope.row.equipment.equipmentName : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="equipment.equipmentTypeStr" label="设备类型">
          <template slot-scope="scope">
            {{ scope.row.equipment ? scope.row.equipment.equipmentTypeStr : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="cameraIdList" label="绑定摄像头">
          <template slot-scope="scope">
            {{ scope.row.cameraIdList ? scope.row.cameraIdList.map(el => { return el.camera.cameraName }).join(',')
    :
    '' }}
          </template>
        </el-table-column>
        <el-table-column width="120" label="操作">
          <template v-if="scope.row.fishPondEquipmentMapperId" slot-scope="scope">
            <el-button v-if="judgePermission(171, 'delete')" class="text-btn-cursor cursor-delete" type="text"
              size="small" @click="bindCamera(scope.row)">绑定摄像头</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-slot:pagination>
      <Pagination @current-change="changeCurrentPage" :page="currentPage" :size="pageSize" :total="totalSize">
      </Pagination>
    </template>
    <template v-slot:dialogModule>
      <el-dialog title="绑定摄像头" :visible.sync="dialogFormVisible" @close="cancel" width="50%">
        <el-form ref="formData" :model="formData"  label-width="120px" class="demo-ruleForm">
          <el-form-item label="摄像头列表">
            <el-select class="w100p" filterable clearable v-model="formData.cameraIdList" multiple>
              <el-option v-for="item in cameraList" :key="item.cameraId + 'camera'" :label="item.cameraName"
                :value="item.cameraId" />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancelbtn" @click="cancel('formData')">取 消</el-button>
          <el-button class="savebtn" type="primary" @click="save">保 存</el-button>
        </div>
      </el-dialog>
    </template>
  </MainSlot>
</div>
</template>

<script>

import MainSlot from "@/components-production-management/MainSlot";
import Pagination from '@/components-production-management/Pagination';
import SearchForm from '@/components-production-management/SearchForm';

import pondAllocationDeviceApi from "@/api/basic-info-manage/pond-allocation-device";
import CameraApi from "@/api/iot-monitoring/camera-management"
import treeSide from "@/components/selectbutton/trelist.vue";

import { mymixin } from "@/utils/mixins";
import { mapGetters } from "vuex";
export default {
  name: "DataItemManagemente",
  components: {
    Pagination,
    MainSlot,
    SearchForm,
    treeSide
  },
  mixins: [mymixin],
  data() {
    return {
      btnList: ['add', 'delete'],
      // 数据项类型id
      topitemtypeid: 1,
      // 设备名称
      equipmentName: "",
      // 鱼塘Id
      fishPondId: undefined,
      // 当前选中的数据项数组
      cameraList: [],
      loading: false,
      formItemList: [
        {
          label: '设备名称',
          type: 'input',
          param: 'equipmentName',
          multiple: false,
          isShow: true
        }],
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {},
  created() { },
  mounted() {
    this.queryCamera();
  },
  methods: {
    // 点击鱼塘触发方法
    treeselectvalue(e) {
      this.fishPondId = e;
      this.addActive = true;
      this.getTableDataList();
    },
    // 获取摄像头下拉选择框数据
    queryCamera() {
      CameraApi.queryByCondition({}).then(res => {
        this.cameraList = res.data || [];
      });
    },
    search(data) {
      console.log(data)
      this.currentPage = 1;
      this.equipmentName = data.equipmentName;
      this.getTableDataList()
    },
    getTableDataList() {
      this.tableData = [];
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: {
          // homeBaseId:1,
          // homeBaseType:""
        }
      };
      if (this.equipmentName) params.entity.equipmentName = this.equipmentName;
      if (this.fishPondId) params.entity.fishPondId = this.fishPondId;
      pondAllocationDeviceApi.queryPageByCondition(params).then(res => {
        let data = res.data;
        // 赋值总条数
        this.totalSize = data.totalElements;
        // 赋值数组
        this.tableData = data.content
        // 摄像头查询
        this.tableData.forEach(el => {
          el?.equipment.equipmentId && CameraApi.queryByEquipmentId({
            equipmentId: el.equipment.equipmentId
          }).then(res => {
            this.$set(el, 'cameraIdList', res.data || [])
          });
        })
      });
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTableDataList();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getTableDataList();
    },
    bindCamera(data) {
      this.formData = {
        cameraIdList: data.cameraIdList.map(el => { return el.cameraId }),
        equipmentId: data.equipmentId
      }
      this.dialogFormVisible = true
    },
    save() {
      CameraApi.addCameraToEquipment(this.formData).then(res => {
        if (res.success === true) {
          this.$message.success("修改成功！");
          this.getTableDataList();
          this.dialogFormVisible = false;
        } else {
          this.$message.error(res.message);
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .typeTree {
    width: 300px;
  }

  .main {
    width: calc(100% - 300px);

    .tableSlot {
      height: 100%;
    }
  }
}
</style>
